<template>
  <page-content
    ref="contentRef"
    :content-config="contentConfig"
    @edit-click="handleEditClick"
    @new-click="handleNewClick"
  />
  <page-modal ref="modalRef" :modal-config="modalResConfig" />
</template>

<script setup lang="ts">
// 模块引入
import { ref, computed } from 'vue'
import PageContent from '@/components/page/content/index.vue'
import PageModal from '@/components/page/modal/index.vue'
import { usePageModal } from '@/components/hooks'
import { contentConfig, modalConfig } from './config'
import useMainStore from '@/store/main/main'

defineOptions({
  // 组件名称
  name: 'MenuManagement',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const typeNum = ref<number>(1)
const isNew = ref<boolean>(false)
const { entireMenus } = useMainStore()

const { modalRef, handleEditClick, handleNewClick } = usePageModal(
  createCallback,
  editCallback
)

const modalResConfig = computed(() => {
  modalConfig.propItems.forEach((item) => {
    if (item.type === 'select' && item.prop === 'parentId') {
      item.options = filterMenus(typeNum.value).map((item) => {
        return {
          label: item.name,
          value: item._id
        }
      })
    }
  })
  return modalConfig
})

function editCallback(data: any) {
  isNew.value = false
  typeNum.value = data.type
}
function createCallback() {
  isNew.value = true
}

function filterMenus(type: number) {
  if (isNew.value) {
    return entireMenus.filter((item) => item.type < 3)
  } else {
    return entireMenus.filter((item) => item.type == type - 1)
  }
}
</script>

<style scoped lang="scss"></style>
